<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				医护认证
			</view>
		</view>
		<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="grace-idcard-main">
				<view class="grace-idcard-text font-normal text-light-gray">
					身份证照片 ( 正面 )
				</view>
				<view class="grace-idcard-items">
					<view class="grace-idcard-uper-btn" @click="selectImg1">
						<view class="img"><image src="../../static/img/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="grace-idcard-preview">
						<jy-image placeholder="/static/loading.gif" :src="idCard1"  @click="previewImg1" mode="aspectFill"></jy-image>
					</view>
				</view>
				<view class="grace-idcard-text font-normal text-light-gray">
					身份证照片 ( 背面 )
				</view>
				<view class="grace-idcard-items">
					<view class="grace-idcard-uper-btn" @click="selectImg2">
						<view class="img"><image src="../../static/img/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="grace-idcard-preview">
						<jy-image placeholder="/static/loading.gif" :src="idCard2" @click="previewImg2" mode="aspectFill"></jy-image>
					</view>
				</view>
				<view class="grace-idcard-text font-normal text-light-gray">
					职业证书
				</view>
				<view class="grace-idcard-items">
					<view class="grace-idcard-uper-btn" @click="selectImg3">
						<view class="img"><image src="../../static/img/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="grace-idcard-preview">
						<jy-image placeholder="/static/loading.gif" :src="license" @click="previewImg3" mode="aspectFill" ></jy-image>
					</view>
				</view>
				<view class="grace-idcard-text font-normal text-light-gray">
					职称证书
				</view>
				<view class="grace-idcard-items">
					<view class="grace-idcard-uper-btn" @click="selectImg4">
						<view class="img"><image src="../../static/img/camera.png" mode="widthFix" /></view>
						<view class="text">拍摄或选择照片</view>
					</view>
					<view class="grace-idcard-preview">
						<jy-image placeholder="/static/loading.gif" :src="professional" @click="previewImg4" mode="aspectFill"></jy-image>
					</view>
				</view>
			</view>
			<view class="cu-item bg-white arrow">
				<view class="content">
					<text class="font-normal">认证角色</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="roleList" :range-key="'ROLE_NAME'"  :value="roleIndex" @change="bindRoleChange">
						<text class=" font-normal">{{roleList[roleIndex].ROLE_NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow">
				<view class="content">
					<text class="font-normal">所在医院</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="hospitalList" :range-key="'HOSPITAL_NAME'"  :value="hospitalIndex" @change="bindHospitalChange">
						<text class=" font-normal">{{hospitalList[hospitalIndex].HOSPITAL_NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow">
				<view class="content">
					<text class="font-normal">工号</text>
				</view>
				<view class="action">
					<input class="font-normal my_input" v-model="workNum" placeholder="请输入工号"/>
				</view>
			</view>
			<view class="cu-item bg-white arrow" v-if="hospitalIndex!=0">
				<view class="content">
					<text class="font-normal">所在科室</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="departmentList" :range-key="'DEPARTMENT_NAME'"  :value="departmentIndex" @change="bindDepartmentChange">
						<text class=" font-normal">{{departmentList[departmentIndex].DEPARTMENT_NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow" v-if="roleIndex!=0">
				<view class="content">
					<text class="font-normal">职位</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="positionList" :range-key="'NAME'" :value="positionIndex" @change="bindPositionChange">
						<text class=" font-normal">{{positionList[positionIndex].NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow">
				<view class="content">
					<text class="font-normal">专业</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="majorList" :range-key="'NAME'"  :value="majorIndex" @change="bindMajorChange">
						<text class=" font-normal">{{majorList[majorIndex].NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow">
				<view class="content">
					<text class="font-normal">学历</text>
				</view>
				<view class="action">
					<picker class="action" mode="selector" :range="educationList" :range-key="'NAME'"  :value="educationIndex" @change="bindEducationChange">
						<text class=" font-normal">{{educationList[educationIndex].NAME}}</text>
					</picker>
				</view>
			</view>
			<view class="cu-item bg-white arrow" @click="showModal" data-target="specialtyModal">
				<view class="content">
					<text class="font-normal">擅长</text>
				</view>
			</view>
			<view class="cu-item bg-white arrow" @click="showModal" data-target="introModal">
				<view class="content">
					<text class="font-normal">个人简介</text>
				</view>
			</view>
		</view>
		<view class="text-center save_btn">
			<button class="cu-btn login-btn font-normal" @click="save()">提 交</button>
		</view>
		<view class="cu-modal" :class="modalName=='specialtyModal'?'show':''" @touchmove.stop.prevent="()=>{}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">擅长</view>
					<view class="action" @click="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left">
					<textarea  maxlength="1000"  auto-height="" v-model="specialty" placeholder="请填写擅长" placeholder-style="padding-bottom:20rpx"></textarea>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-blue margin-left" @click="hideModal">完成</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='introModal'?'show':''" @touchmove.stop.prevent="()=>{}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">个人简介</view>
					<view class="action" @click="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left">
					<textarea maxlength="5000" auto-height="" v-model="intro" placeholder="请填写个人简介" placeholder-style="padding-bottom:20rpx"></textarea>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-blue margin-left" @click="hideModal">完成</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import _config from '../../config/index.js'; // 导入私有配置
	import checkUtil from '@/utils/checkUtil.js'
	import md5 from '@/common/lib/md5.min.js'
	import {formatTimeStap} from '@/utils/datetime.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed:{
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				modalName:'',
				statusBarHeight:Vue.prototype.StatusBar,
				avatar:'',
				idCard1 :'' ,
				idCard2 : '',
				workNum:'',
				specialty:'',
				hospitalId:'',
				departmentId:'',
				user:'',
				intro:'',
				//职位
				positionList:[{'name':'请选择职位'}],
				positionIndex:0,
				//学历
				educationList:[{'name':'请选择学历'}],
				educationIndex: 0,
				//专业
				majorList:[{'name':'请选择专业'}],
				majorIndex: 0,
				//医院
				hospitalList:[{'HOSPITAL_NAME':'请选择医院'}],
				hospitalIndex: 0,
				//部门
				departmentList:[{'DEPARTMENT_NAME':'请选择科室'}],
				departmentIndex: 0,
				//认证角色
				roleList:[{'ROLE_NAME':'请选择角色'},{'ROLE_NAME':'医生'},{'ROLE_NAME':'护士'}],
				roleIndex: 0,
				license :'',
				professional:'',
				flag:'false',//是否修改认证
			}
		},
		watch:{
			hospitalId(val) {
				this.$http.getDepartmentList({
					hospitalId:val
				}).then((res)=>{
					if(res.code==1){
						that.departmentList=[{"DEPARTMENT_NAME":"请选择科室"}].concat(res.result) 
						for(var i=0;i<that.departmentList.length;i++){
							if(that.departmentList[i].HOSPITALDEPARTMENT_ID == that.user.DEPARTMENT){
								that.departmentIndex = i;
								return;
							}
						}
					}
				})
			}
		},
		onLoad(e) {
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.flag = e.flag;
			if(this.flag == 'true'){
				that.$http.getMedicalAuthInfo({
					phone:that.user.PHONE
				}).then(res=>{
					if(res.code==1){
						that.user = res.result
						that.license = that.user.LICENSE||'../../static/img/license.png'
						that.professional = that.user.PROFESSIONAL||'../../static/img/professional.jpg'
						that.idCard1 = that.user.ID_CARD_POSITIVE
						that.idCard2 = that.user.ID_CARD_BACK
						that.specialty = that.user.SPECIALTY
						that.roleIndex = that.user.ROLE_TYPE
						that.workNum = that.user.WORK_NUM
						that.hospitalId = that.user.HOSPITAL
						that.departmentId = that.user.DEPARTMENT
						that.$http.queryMedicalStaffDetail({
							medicalStaffId:that.user.MEDICALSTAFF_ID
						}).then(res=>{
							that.intro = res.result.INTRO
						})
						
						that.$http.getEducationList().then((res)=>{
							if(res.code==1){
								that.educationList=[{"NAME":"请选择学历"}].concat(res.result) 
								for(var i=0;i<that.educationList.length;i++){
									if(that.educationList[i].NAME == that.user.EDUCATION){
										that.educationIndex = i;
										return;
									}
								}
							}
						})
						that.$http.getMajorList().then((res)=>{
							if(res.code==1){
								that.majorList=[{"NAME":"请选择专业"}].concat(res.result) 
								for(var i=0;i<that.majorList.length;i++){
									if(that.majorList[i].NAME == that.user.MAJOR){
										that.majorIndex = i;
										return;
									}
								}
							}
						})
						that.$http.getHospitalList({}).then((res)=>{
							if(res.code==1){
								that.hospitalList=[{"HOSPITAL_NAME":"请选择医院"}].concat(res.result) 
								for(var i=0;i<that.hospitalList.length;i++){
									if(that.hospitalList[i].HOSPITAL_ID == that.user.HOSPITAL){
										that.hospitalIndex = i;
										return;
									}
								}
							}
						})
						that.getPosition(that.user.ROLE_TYPE)
					}
				})
			}else{
				that.idCard1 = '../../static/img/idcard1.png'
				that.idCard2 = '../../static/img/idcard2.png'
				that.license = that.user.LICENSE||'../../static/img/license.png'
				that.professional = that.user.PROFESSIONAL||'../../static/img/professional.jpg'
				that.$http.getEducationList().then((res)=>{
					if(res.code==1){
						that.educationList=[{"NAME":"请选择学历"}].concat(res.result) 
						for(var i=0;i<that.educationList.length;i++){
							if(that.educationList[i].NAME == that.user.EDUCATION){
								that.educationIndex = i;
								return;
							}
						}
					}
				})
				that.$http.getMajorList().then((res)=>{
					if(res.code==1){
						that.majorList=[{"NAME":"请选择专业"}].concat(res.result) 
						for(var i=0;i<that.majorList.length;i++){
							if(that.majorList[i].NAME == that.user.MAJOR){
								that.majorIndex = i;
								return;
							}
						}
					}
				})
				that.$http.getHospitalList({}).then((res)=>{
					if(res.code==1){
						that.hospitalList=[{"HOSPITAL_NAME":"请选择医院"}].concat(res.result) 
						for(var i=0;i<that.hospitalList.length;i++){
							if(that.hospitalList[i].HOSPITAL_ID == that.user.HOSPITAL){
								that.hospitalIndex = i;
								return;
							}
						}
					}
				})
			}
			
			
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			getPosition(type){
				this.$http.getPositionList({
					levelType:type
				}).then((res)=>{
					if(res.code==1){
						that.positionList=[{"NAME":"请选择职位"}].concat(res.result) 
						for(var i=0;i<that.positionList.length;i++){
							if(that.positionList[i].NAME == that.user.POSITION){
								that.positionIndex = i;
								return;
							}
						}
					}
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			bindSexChange: function(e) {
				this.sexIndex = e.target.value
			},
			bindPositionChange: function(e) {
				this.positionIndex = e.target.value
			},
			bindEducationChange: function(e) {
				this.educationIndex = e.target.value
			},
			bindMajorChange: function(e) {
				this.majorIndex = e.target.value
			},
			bindHospitalChange: function(e) {
				this.hospitalIndex = e.target.value
				this.hospitalId = this.hospitalList[this.hospitalIndex].HOSPITAL_ID
				this.departmentIndex = 0;
				this.departmentList = [{'DEPARTMENT_NAME':'请选择科室'}]
			},
			bindDepartmentChange: function(e) {
				this.departmentIndex = e.target.value
				this.departmentId = this.departmentList[this.departmentIndex].HOSPITALDEPARTMENT_ID
			},
			bindRoleChange: function(e) {
				this.roleIndex = e.target.value
				this.getPosition(e.target.value)
			},
			back(){
				uni.navigateBack();
			},
			changeAvatar(){
				uni.chooseImage({
					count:1,
					success:function(res){
						that.avatar = res.tempFilePaths[0];
					}
				})
			},
			selectImg1 : function() {
				uni.chooseImage({
					count:1,
					success:function(res){
						that.idCard1 = res.tempFilePaths[0];
					}
				})
			},
			selectImg2 : function() {
				uni.chooseImage({
					count:1,
					success:function(res){
						that.idCard2 = res.tempFilePaths[0];
					}
				})
			},
			selectImg3 : function() {
				uni.chooseImage({
					count:1,
					success:function(res){
						that.license = res.tempFilePaths[0];
					}
				})
			},
			selectImg4 : function() {
				uni.chooseImage({
					count:1,
					success:function(res){
						that.professional = res.tempFilePaths[0];
					}
				})
			},
			previewImg1 : function(){
				uni.previewImage({
					urls:[that.idCard1]
				});
			},
			previewImg2 : function(){
				uni.previewImage({
					urls:[that.idCard2]
				});
			},
			previewImg3 : function(){
				uni.previewImage({
					urls:[that.license]
				});
			},
			previewImg4 : function(){
				uni.previewImage({
					urls:[that.professional]
				});
			},
			save : function(){
				if(this.workNum==""||this.workNum==undefined){
					uni.showToast({title:"请输入工号", position:"bottom",icon:"none"});
					return;
				}
				if(this.roleIndex==0){
					uni.showToast({title:"请选择认证角色", position:"bottom",icon:"none"});
					return;
				}
				if(this.hospitalIndex==0){
					uni.showToast({title:"请选择所在医院", position:"bottom",icon:"none"});
					return;
				}
				if(this.departmentIndex == 0){
					uni.showToast({title:"请选择所在科室", position:"bottom",icon:"none"});
					return;
				}
				if(this.positionIndex==0){
					uni.showToast({title:"请选择职位", position:"bottom",icon:"none"});
					return;
				}
				if(this.majorIndex == 0){
					uni.showToast({title:"请选择专业", position:"bottom",icon:"none"});
					return;
				}
				if(this.educationIndex == 0){
					uni.showToast({title:"请选择学历", position:"bottom",icon:"none"});
					return;
				}
				if(this.specialty==""||this.specialty==undefined){
					uni.showToast({title:"请填写擅长", position:"bottom",icon:"none"});
					return;
				}
				if(this.intro==""||this.intro==undefined){
					uni.showToast({title:"请填写个人简介", position:"bottom",icon:"none"});
					return;
				}
				if(this.idCard1 == '../../static/img/idcard1.png' || this.idCard2 == '../../static/img/idcard2.png'){
					uni.showToast({title:"请上传身份证照片", position:"bottom",icon:"none"});
					return;
				}
				if(this.license == '../../static/img/license.png'){
					uni.showToast({title:"请上传职业证书照片", position:"bottom",icon:"none"});
					return;
				}
				if(this.professional == '../../static/img/professional.jpg'){
					uni.showToast({title:"请上传职称证书照片", position:"bottom",icon:"none"});
					return;
				}
				var imgs = [
					{"name":"avatar",
					"uri":that.avatar},
					{"name":"positive",
					"uri":that.idCard1},
					{"name":"back",
					"uri":that.idCard2},
					{"name":"license",
					"uri":that.license},
					{"name":"professional",
					"uri":that.professional},
				]
				uni.showLoading({title:"提交中..."});
				var url = "app/addMedicalAuth"
				if(that.flag=='true'){//审核被拒，需要重新提交认证
					url = "app/updateMedicalStaffInfo"
				}
				uni.uploadFile({
					url:_config.ipAddress+url,
					header:{
						"token":uni.getStorageSync("token"),
						"currentTime":formatTimeStap(new Date())
					},
					sizeType: ['compressed'],  
					files:imgs,
					formData:{
						name:that.user.NAME,
						sex:that.user.SEX,
						idCard:that.user.ID_CARD,
						phone:that.user.PHONE,
						workNum:that.workNum,
						specialty:that.specialty,
						intro:that.intro,
						roleType:that.roleIndex,
						hospitalId:that.hospitalId,
						departmentId:that.departmentId,
						position:that.positionList[that.positionIndex].NAME,
						major:that.majorList[that.majorIndex].NAME,
						education:that.educationList[that.educationIndex].NAME,
						password:uni.getStorageSync("autoInfo").password
					},
					success:(res)=>{
						res = JSON.parse(res.data)
						if(res.code==1){
							uni.showToast({title:"提交成功！请等待审核", position:"bottom",icon:"none"});
							setTimeout(function(){
								uni.navigateBack();
							},1500)
						}else{
							uni.showToast({title:res.message, position:"bottom",icon:"none"});
						}
					},
					fail(res) {
					
					}
				})
			}
		}
	}
</script>

<style>
.cu-item{
	height: 108rpx;
}
.content{
	color:#878A99;
}
.my_input{
	text-align: right;
	vertical-align: middle;
	width:500rpx
}
.my_textarea{
	border: 1px solid #000;
}
.grace-idcard-main{margin:20upx 30upx;}
.grace-idcard-desc{line-height:2em; background:#FFFFFF; padding:20upx; border-radius:10upx;}
.grace-idcard-text{line-height:2em; margin-top:30upx;}
.grace-idcard-items{background:#FFFFFF; padding:30upx 0; display:flex; margin:30upx 0; border-radius:10upx; align-items: flex-start;}
.grace-idcard-uper-btn{width:276upx; margin:0 60upx; background:#F1F1F1; padding-bottom:10upx; border-radius:10upx; text-align:center;}
.grace-idcard-uper-btn .img{width:100upx; height:100upx; margin:0 auto; margin-top:30upx;}
.grace-idcard-uper-btn .img image{width:100upx; height:100upx;}
.grace-idcard-uper-btn .text{width:100%; margin-top:10upx; text-align:center; line-height:2em;}
.grace-idcard-preview{width:50%; margin:0 30upx;}
.grace-idcard-preview image{width:100%;	height: 200rpx;}
.login-btn {
	border-radius: 0;
	background-color: #427EE3!important;
	color: #fff;
	width: 100%;
	height: 80rpx;
}
.save_btn{
	margin: 20rpx 30rpx;
}
</style>
